<template>
	<view class="navbar">

		<view class="fixed-content">
			<!-- 状态栏高度 -->
			<view :style="{'height': geStatusBarHeight() + 'px'}"></view>
			<!-- 导航栏高度1 -->
			<view class="bar-content" :style="{'height': getNavBarHeight()+'px'}">
				<slot>
					<image @tap="navigateBack()" class="nav-left" src="/static/image/nav-back.png" mode=""></image>
					<view class="nav-title">{{ title }}</view>
					<view class="right-icon rank-icon" @click="handleToRank" v-if="showRank">
						<image class="img" src="/static/image/game-icon-rank.png"></image>
					</view>

					<view class="right-icon setting-rank" @click="handleToSetting">
						<image class="img" src="/static/image/game-icon-setup.png" mode="widthFix"></image>
					</view>
				</slot>
			</view>
		</view>
		<!-- 占位高度，状态栏高度+导航栏高度，父组件就不需要计算导航栏高度 -->
		<view :style="{'height': geStatusBarHeight() + getNavBarHeight() + 'px'}"></view>

		<gameSetting v-if="showTips" :msg="rules" title="设置" @confirm="showTips = false"></gameSetting>

	</view>
</template>

<script>
	import gameSetting from './games/gameSetting.vue'
	export default {
		name: 'gamesNav',
		props: {
			title: {
				type: String,
				default: ''
			},
			closeConfirm: {
				type: Boolean,
				default: false
			},
			showRank: {
				type: Boolean,
				default: false
			}
		},
		components: {
			gameSetting,
		},
		data() {
			return {
				rules: '极速拼词|联机模式',
				showTips: false,
			}
		},
		methods: {
			// 获取状态栏高度
			geStatusBarHeight() {
				return uni.getSystemInfoSync()['statusBarHeight']
			},

			// 获取导航栏高度
			getNavBarHeight() {
				// #ifdef MP-WEIXIN
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// 导航栏高度 = 胶囊高度 + 上间距 + 下间距 + 微调	（menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight'] = 上间距）	        
				let navbarHeight = menuButtonInfo.height + (menuButtonInfo.top - uni.getSystemInfoSync()[
					'statusBarHeight']) * 2 + 2
				// #endif
				// #ifdef APP-PLUS || H5
				let navbarHeight = 44
				// #endif
				return navbarHeight
			},

			//点击返回上一页
			navigateBack() {
				var that = this;
				if (that.title == '本轮排行') {
					if ('判断网络状态') {
						if (!that.$util.getNetWorkStatus()) {
							return false;
						}
					}

					uni.redirectTo({
						url: '/pages/games/index'
					});
					return false;
				}
				console.log('closeConfirm;', that.closeConfirm)
				if (that.closeConfirm == true) {
					that.$emit('leaveRoom', {
						'a': 1
					});
				} else {
					uni.navigateBack();
				}
			},


			confirm() {
				console.log('点击确认按钮');
				uni.navigateBack();
			},
			handleToRank() {
				uni.navigateTo({
					url: "/pages/games/rankList"
				})
			},
			handleToSetting() {
				var that = this;
				// that.$eventBus.$emit('callMethodIn_background_type', {
				// 	type: ''
				// })
				that.showTips = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navbar {
		position: relative;

		.fixed-content {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			padding: 0 24rpx;
			z-index: 1000;
			background: linear-gradient(to bottom, #130e00, #1c170d);

			.bar-content {
				display: flex;
				align-items: center;
				position: relative;

				.nav-left {
					width: 18px;
					height: 18px;
					position: absolute;
					z-index: 2;
					top: 50%;
					transform: translateY(-50%);
				}

				.nav-title {
					color: #fff;
					font-weight: bold;
					font-size: 16px;
					width: 100%;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					text-align: center;
				}
			}
		}
	}

	.right-icon {
		width: 30px;
		height: 30px;
		border-radius: 4px;
		position: absolute;
		top: 4px;

		.img {
			width: 30px;
			height: 30px;
		}
	}

	.setting-rank {
		right: 0;
	}

	.rank-icon {
		right: 40px;
		background: linear-gradient(to top, #fff497, #ffd16b);
		box-shadow: 0 4px 0 0 #d9b059;
	}
</style>